<template>
  <form-item title="登陆谷歌验证" value="google_check">
    <el-radio-group v-model="data.query.google_check" size="large" @change="chooseGoogle">
      <el-radio-button label="不验证" :value="0" />
      <el-radio-button label="验证" :value="1" />
    </el-radio-group>
    <span class="tipsText" v-show="props.ipShow">(开启谷歌验证后，登录后台需输入谷歌验证码；首次开启此功能需进行绑定“身份验证器”)</span>
  </form-item>
  <form-item title="谷歌Url" value="google_url" v-show="data.query.google_check" style="height:auto">
    <QrcodeVue :value="data.query.google_url" :size="140" fg-color="#000" />
    <el-input class="imWidth100 marginT5" v-model="data.query.google_url" type="text" readonly />
    <span class="tipsText">(该账号绑定的谷歌Url，自动生成)</span>
  </form-item>
  <form-item title="谷歌秘钥" value="google_secret" v-show="data.query.google_check">
    <el-input class="marginT5" v-model="data.query.google_secret" type="text" readonly />
    <span class="tipsText">(该账号绑定的谷歌秘钥，自动生成)</span>
  </form-item>
  <form-item title="谷歌验证码" :pass="props.checkedItem.google_check && props.checkedItem.google_url || data.query.google_check?true:false" value="google_code" 
    v-show="data.query.google_check || props.checkedItem.google_url && props.checkedItem.google_check">
    <el-input class="marginT5" v-model="data.query.google_code" type="text" placeholder="请输入谷歌验证码" />
    <el-button class="marginL10 marginT5" v-show="props.checkedItem.google_url && data.query.google_check?true:false"  type="warning" :disabled="data.query.google_code?false:true" @click="changeGoogle">更换谷歌绑定</el-button>
    <span class="tipsText">(该账号绑定的谷歌验证码)</span>
  </form-item>
  <form-item title="登陆IP白名单" value="white_ip" v-show="props.ipShow">
    <el-input clearable maxlength="200" type="textarea" :checkedItems="3" placeholder="请输入登陆IP白名单,多个IP用( ; )分开"
      v-model="data.query.white_ip" />
    <span class="tipsText">(该账号只能在设定的IP地址下登录才能进入后台)</span>
  </form-item>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import QrcodeVue from 'qrcode.vue'
import { googleKey,checkGoogleKey } from '@/api/merchant'

const props = defineProps({
  ipShow: {
    type: Boolean,
    default: () => true
  },
  googleShow: {
    type: Boolean,
    default: () => false
  },
  checkedItem: {
    type: Object,
    default: () => { }
  }
})

const data = reactive({
  query: {
    google_check: 0, // 是否开启谷歌验证码
    google_url: '', // 谷歌二维码 
    google_secret: '', // 谷歌二维码
    google_code: '', // 谷歌验证码
    white_ip: '' // IP白名单
  } as any,
})

watch(
  () => props.checkedItem,
  (value) => {
    if(value){
      let query = JSON.parse(JSON.stringify(value));
      if(!data.query.google_code){
        data.query.google_code = ''
      }
      data.query.google_check = query.google_check?query.google_check:0
      data.query.google_url = query.google_url
      data.query.google_secret = query.google_secret
      data.query.white_ip = query.white_ip
    }else{
      data.query = {
        google_check: 0, // 是否开启谷歌验证码
        google_url: '', // 谷歌二维码 
        google_secret: '', // 谷歌二维码
        google_code: '', // 谷歌验证码
        white_ip: '' // IP白名单
      } as any
    }    
  },
  { deep: true }
)

export interface QueryType {
  google_check: number, // 是否开启谷歌验证码
  google_url: string, // 谷歌二维码 
  google_secret: string, // 谷歌二维码
  google_code: string, // 谷歌验证码
  white_ip: string, // 谷歌验证码
}

// 是否开启谷歌验证码
const chooseGoogle = async (value: number,type:boolean) => {
  let query = JSON.parse(JSON.stringify(data.query)), name = props.checkedItem.username?props.checkedItem.username:props.checkedItem.account;

  data.query.google_check = value
  if (!name) {
    data.query.google_check = 0
    return ElMessage.error('请输入账号')
  }
  if(!value)return

  if(!props.checkedItem.google_check && !query.google_check){
    query.google_code = ''
    query.google_url = ''
    query.google_secret = ''
  }
  
  if (query.google_url && !type) return
  let res = await googleKey({ username: name })
  data.query.google_url = res.data.google_url
  data.query.google_secret = res.data.google_secret
}

// 更换谷歌验证码
const changeGoogle = async () => {
  if (!data.query.google_code) {
    return ElMessage.error('请输入谷歌验证码')
  }
  await checkGoogleKey({
    google_code: data.query.google_code,
    google_secret: data.query.google_secret
  })
  chooseGoogle(1,true)
}

// 返回谷歌信息
const returnGoogle = (item:any) => {
  item.google_check = data.query.google_check
  item.google_url = data.query.google_url
  item.google_secret = data.query.google_secret
  item.google_code = Number(data.query.google_code)
  item.white_ip = data.query.white_ip
  return item
}

// 返回谷歌信息
const onHideDetails = () => {
  data.query = {
    google_check: 0, // 是否开启谷歌验证码
    google_url: '', // 谷歌二维码 
    google_secret: '', // 谷歌二维码
    google_code: '', // 谷歌验证码
    white_ip: '' // IP白名单
  } as any
}

defineExpose({
  onHideDetails,
  returnGoogle
})
</script>

<style lang="scss" scoped></style>
